import MyIcon from "@/components/common/Icon/MyIcon";
import ChatTest from "@/components/core/workflow/Flow/ChatTest";
import { getWorkflowStore, WorkflowContext } from "@/context/WorkflowContext";
import { Box, Button, Flex, GridItem, HStack, useDisclosure, useUpdateEffect } from "@chakra-ui/react";
import React, { useCallback, useContext, useRef, useState } from "react";
import { useMemo } from "react";


const Header = (props: any) => {
  const edges = useContext(WorkflowContext);
  const { isOpen: isOpenTest, onOpen: onOpenTest, onClose: onCloseTest } = useDisclosure();

  const ChatTestRef = useRef(null);
  
  const [workflowTestData, setWorkflowTestData] = useState(null);

  useUpdateEffect(() => {
    onOpenTest();
  }, [workflowTestData]);
  
  const flowData2StoreDataAndCheck = useCallback(async () => {
    const { nodes } = await getWorkflowStore();
    return {
      nodes,
      edges
    }
    // const checkResults = checkWorkflowNodeAndConnection({ nodes, edges });
    // if (!checkResults) {
    //   const storeNodes = uiWorkflow2StoreWorkflow({ nodes, edges });
    //   return storeNodes;
    // } else {
    //   checkResults.forEach((nodeId) => onUpdateNodeError(nodeId, true));
    //   toast({
    //     status: 'warning',
    //     title: t('core.workflow.Check Failed')
    //   });
  }, []);
  
  const Render = (() => {
    return (
      <>
  
      <Flex className="w-full items-center justify-between px-2"   borderBottom={'base'}>
        <Flex className="items-center ">
          <MyIcon
            name={"common/leftArrowLight"}
            w={"1.75rem"}
            cursor={"pointer"}
          />
          <Box ml={1}>
            iyw1w1w1
            {/* <AppCard
                showSaveStatus={
                    !historiesDefaultData && isV2Workflow && currentTab === TabEnum.appEdit
                }
                /> */}
          </Box>
        </Flex>
        <Box>FlowEdit</Box>
        <Box>
          <Box>
            <HStack flexDirection={["column", "row"]} spacing={[2, 3]}>
              <Button
                size={"sm"}
                leftIcon={
                  <MyIcon name={"common/publishFill"} w={["14px", "16px"]} />
                }
                onClick={async () => {
                  const data = await flowData2StoreDataAndCheck();
                  if (data) {
                    setWorkflowTestData(data);
                  }
                }}
              >
                调试{isOpenTest? "关闭": "开启"}
              </Button>
              <Button
                size={"sm"}
                leftIcon={
                  <MyIcon name={"common/publishFill"} w={["14px", "16px"]} />
                }
              >
                发布
              </Button>
            </HStack>
          </Box>
        </Box>
      </Flex>
      <ChatTest ref={ChatTestRef} isOpen={isOpenTest} {...workflowTestData} onClose={onCloseTest} />
      </>
    );
  })();

  return <>
    {Render}
  </>;
};

export default React.memo(Header);
